<template>
  <div id="loginApp">
    <a-form
        id="components-form-demo-normal-login"
        :form="form"
        class="login-form"
        @submit="handleSubmit"
    >
<!--邮箱-->
      <a-form-item>
        <a-input
            v-decorator="[
          'email',
          { rules: [{ required: true, message: '请填写邮箱！' }] },
        ]"
            placeholder="邮箱"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
<!--用户名-->
      <a-form-item>
        <a-input
            v-decorator="[
          'username',
          { rules: [{ required: true, message: '请填写用户名！' }] },
        ]"
            placeholder="用户名"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
<!--密码-->
      <a-form-item>
        <a-input
            v-decorator="[
          'password',
          { rules: [{ required: true, message: 'Please input your Password!' }] },
        ]"
            type="password"
            placeholder="密码"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <!--验证码-->
      <div class="resAuth">
        <a-form-item>
          <a-input
              v-decorator="[
                'authCode',
                { rules: [{ required: true, message: '请填写验证码！' }] },
              ]"
              placeholder="验证码"
          >
          </a-input>
        </a-form-item>
        <a-button type="primary" @click="authBtn"  class="resAuthBtn">
<!--判断是否有值-->
          {{authCode?authCode:"获取验证码"}}
        </a-button>
      </div>
<!--点击注册-->
        <a-button type="primary" html-type="submit" class="login-form-button" >
          注 册
        </a-button>
        <router-link :to="{name:'Login'}">立即登录</router-link>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import popUp from "@/utils/popUp";
export default {
  data() {
    return {
      //验证码
      authCode : "",
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_login' });
  },
  methods: {
    //点击提交数据
    handleSubmit(e) {
      e.preventDefault();

      this.form.validateFields((err, values) => {
        //如果没有获取验证码 则弹出提示
        //返回弹窗组件
        if (!this.authCode){
          this.warning('请获取验证码');
          return ;
        }else if (values.authCode.toUpperCase()!=this.authCode.toUpperCase()){
          //如果验证码错误
          this.error("验证码错误");
          return ;
        }
        //如果不是err则提交数据
        if (!err) {
          this.$axios({
            methods:"post",
            url:"https://mallapi.duyiedu.com//passport/logon",
            //后台地址
            data:{
              appkey:"zhoujiangyun_1618415564670",
              email:values.email,
              password:values.password,
              username:values.username,
              code:values.authCode,
              role:"customer"
            }
          }).then(resp=>{
            this.success("注册成功");
            //无刷新页面跳转 跳转到登录页面
            this.$router.push({name:"Login"});
          }).catch(err=>{
            this.error(err);
          })

        }
      });
    },
    //验证码点击事件
    authBtn(){
      //判断验证码之前是否有值 如果有值先清空
      if (this.authCode){
        this.authCode = "";
      };
      //生成随机四位数验证码
      var str="1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM";
      for(var i=0;i<4;i++){
        //将得到的结果给字符串，调用随机函数，0最小数，62表示数字加字母的总数
        this.authCode+=str[Math.round(Math.random()*(62-0)+0)];
      };
    },
    ...popUp
  },

};
</script>
<style scoped lang="less">
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
#loginApp{
  width: 300px;
  margin: 0 auto;
  padding-top: 10%;
  //验证码
  .resAuth{
    display: flex;
    justify-content: space-between;
    align-content: center;
    .resAuthBtn{
      margin-top:4px ;
      width: 110px;
      margin-left: 10px;
    }
  }
}


</style>